<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>刮刮卡</title>
    <style>
        #div {
            position: relative;
            user-select: none;
            color: red;
            font-size: 35px;
            text-align: center;
            width: 440px;
            min-height: 280px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: '宋体'
        }

        #div>canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>

<body>
    <div id='div'>
        恭喜你中奖了
        <!--    <canvas id="myCanvas"></canvas> -->
    </div>
</body>
<script type="text/javascript">
    window.onload = function () {
        (function init() {//我是想通过js自动生成一个canvas
            if (!document.getElementById("myCanvas")) {
                var width = "";
                var height = "";
                var canvas = document.createElement("canvas");
                width = document.getElementById("div").offsetWidth;
                height = document.getElementById("div").offsetHeight;
                canvas.setAttribute("width", width + "px");
                canvas.setAttribute("height", height + "px");
                canvas.setAttribute("style", "border:1px solid green");
                canvas.id = "myCanvas";
                document.getElementById("div").appendChild(canvas);
            }

            var myCanvasObject = document.getElementById("myCanvas");
            var ctx = myCanvasObject.getContext("2d");

            //绘制黑色矩形
            ctx.beginPath();//绘制开始
            ctx.fillStyle = "#939393";//设置填充颜色
            ctx.rect(0, 0, width, height);//设置矩形位置和宽高
            ctx.closePath();//关闭
            ctx.fill();//调用填充颜色

            var isDown = false; //鼠标是否按下标志
            var pointerArr = []; //鼠标移动坐标数组
            var xPointer = 0;//鼠标当前x坐标
            var yPointer = 0;//鼠标当前y坐标


            //pc，移动事件兼容写法
            var hastouch = "ontouchstart" in window ? true : false,
                tapstart = hastouch ? "touchstart" : "mousedown",
                tapmove = hastouch ? "touchmove" : "mousemove",
                tapend = hastouch ? "touchend" : "mouseup";


            //鼠标按下
            myCanvasObject.addEventListener(tapstart, function (event) {
                var e = window.event || event;
                this.style.cursor = "move";
                isDown = true;
                xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;
                yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
                pointerArr.push([xPointer, yPointer]);
                circleReset(ctx);
            });


            //鼠标按下后拖动
            myCanvasObject.addEventListener(tapmove, function (event) {
                var e = window.event || event;
                if (isDown) {
                    xPointer = hastouch ? e.targetTouches[0].pageX : e.clientX - this.offsetLeft;;
                    yPointer = hastouch ? e.targetTouches[0].pageY : e.clientY - this.offsetTop;;
                    pointerArr.push([xPointer, yPointer]);
                    circleReset(ctx);
                }
            });


            //鼠标抬起取消事件
            myCanvasObject.addEventListener(tapend, function (event) {
                isDown = false;
                pointerArr = [];
            });


            //圆形橡皮檫
            function circleReset(ctx) {
                ctx.save();
                ctx.beginPath();
                ctx.moveTo(pointerArr[0][0], pointerArr[0][1]);
                ctx.lineCap = "round";　　 //设置线条两端为圆弧
                ctx.lineJoin = "round";　　 //设置线条转折为圆弧
                ctx.lineWidth = 60;
                ctx.globalCompositeOperation = "destination-out";
                if (pointerArr.length == 1) {
                    ctx.lineTo(pointerArr[0][0] + 1, pointerArr[0][1] + 1);
                } else {
                    for (var i = 1; i < pointerArr.length; i++) {
                        ctx.lineTo(pointerArr[i][0], pointerArr[i][1]);
                        ctx.moveTo(pointerArr[i][0], pointerArr[i][1]);
                    }
                }
                ctx.closePath();
                ctx.stroke();
                ctx.restore();
            }
        })();
    }
</script>

</html>
